<template>
  <div class="profile-container">
    <div class="pfheader">
      <h1>个人信息管理</h1>
      <router-link class="router-scholar" v-if="userForm.scholar_id !== null" :to="{ name: 'scholar', params: { scholar_id: userForm.scholar_id } }">
        <el-button type="primary">前往门户</el-button>
      </router-link>
    </div>
    <el-form :model="user" label-width="80px">
      <el-form-item label="昵称">
        <el-input v-model="userForm.user_name"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userForm.email"></el-input>
      </el-form-item>
      <el-form-item label="姓名" v-if="userForm.scholar_id !== null">
        <el-input v-model="userForm.scholar_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="简介" v-if="userForm.scholar_id !== null">
        <el-input v-model="userForm.introduction"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="changePassword">修改密码</el-button>
            <el-button type="primary" @click="saveProfile">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { req_modifyUsername, req_modifyEmail, req_modifyInfor } from '/src/api'
import { ElMessage } from 'element-plus';

export default {
  name: "Profile",
  data() {
    return {
      user: {},
      userForm:{}
    };
  },
  watch: {
    '$store.state.user': {
      handler: 'updateThisUser',
      immediate: true, 
    },
  },
  methods: {
    updateThisUser(user){
      if (user.user_id !== -1) {
        this.user = user;
        this.userForm = JSON.parse(JSON.stringify(this.user))
      }
    },
    changePassword() {
      this.$router.push('/changepwd');
    }, 
    async saveProfile() {
      if(this.userForm.user_name !== this.user.user_name){
        this.modifyUsername(this.userForm.user_name);
      }
      if(this.userForm.email !== this.user.email){
        this.modifyEmail(this.userForm.email);
      }
      if(this.userForm.introduction !== this.user.introduction){
        this.modifyInfor(this.userForm.introduction)
      }
    },
    async modifyUsername(new_name){
      try {
        let response = await req_modifyUsername(new_name);
        let data = response.data;
        if (data['errno'] === 1) {
          ElMessage.success("用户名保存成功");
        }else if(data['errno'] === 2002){
          ElMessage.info("用户名已注册");
        }
      } catch (error) {
        // ElMessage.error("modify username error!");
      }      
    },
    async modifyEmail(new_email){
      try {
        let response = await req_modifyEmail(new_email);
        let data = response.data;
        if (data['errno'] === 1) {
          ElMessage.success("邮箱保存成功");
        }
      } catch (error) {
        // ElMessage.error("modify email error!");
      }      
    },
    async modifyInfor(new_infor){
      try {
        let response = await req_modifyInfor(new_infor);
        let data = response.data;
        console.log(data)
        if (data['errno'] === 1) {
          ElMessage.success("个人介绍保存成功");
        }
      } catch (error) {
        // ElMessage.error("modify infor error!");
      }      
    },
    
  },
  mounted(){
    // this.updateUser();
    console.log()
  }
};
</script>

<style scoped>
.profile-container {
  max-width: 600px;
  margin: 100px auto;
  padding: 50px; /* 调整内边距 */
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden; /* 隐藏溢出内容 */
}
.pfheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px; /* 调整标题和按钮之间的垂直间距 */
}
.router-scholar{
  margin-bottom: 15px;
}
h1 {
  margin-bottom: 20px;
}
</style>
